<template>
  <div class="earnings">
    <div class="earnings-header clearfloat">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/agent/home/menu' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>我的收益</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="btns fr">
        <el-button @click='lastMonthSettlement' >上月结算明细</el-button>
        <orderStatistics :myInfo ='myInfo' :roleID='roleID'  @getData='getTableData'/>
        <table-search
          class='clearfloat'
          ref="table-search"
          :isGetAgent='false'
          :selectHead="selectHead"
          @searchMethods="searchMethods">
        </table-search>
      </div>
    </div>
    <div class="earnings-main">
      <el-table
        ref="tableRef"
        :data="tableData"
        border
        v-loading="loading"
        height='100%'
        @row-click='selectRow'
        @sort-change='tableSortChange'>

        <el-table-column show-overflow-tooltip label="订单编号" align="center" prop='order_number' sortable='custom' min-width="200"></el-table-column>
        <el-table-column show-overflow-tooltip  prop="type" label="专利类型" min-width="120" align="center" sortable='custom'>
					<template slot-scope="scope">
						<span v-if='scope.row.final'>
							{{ scope.row.final.type | typeFilter }}
						</span>
						<span v-else>
							无
						</span>
					</template>
				</el-table-column>
				<el-table-column show-overflow-tooltip prop="name" label="案件名称" min-width="150" align="center" sortable='custom'>
					<template slot-scope="scope">
						<span v-if='scope.row.final'>
							{{ scope.row.final.name | getNullVal }}
						</span>
						<span v-else>
							无
						</span>
					</template>
				</el-table-column>
				<el-table-column show-overflow-tooltip  prop='liaisons' label="联络人" min-width="120" align="center" sortable='custom'>
					<template slot-scope="scope">
						<span v-if='scope.row.final'>
							<template v-if='scope.row.final.order'>
								{{ scope.row.final.order.liaisons | getNullVal }}
							</template>
							<template v-else>
								无
							</template>
						</span>
						<span v-else>
							无
						</span>
					</template>
				</el-table-column>
        <el-table-column show-overflow-tooltip  prop='settlements_price' label="结算金额" min-width="140" align="center" sortable='custom'>
					<template slot="header">
						<span>结算金额(元)</span>
					</template>
					<template slot-scope="scope">
						<span class="settlementColor">{{ scope.row.prices }}</span>
					</template>
				</el-table-column>
        <el-table-column show-overflow-tooltip  prop='reward' label="案件奖励" min-width="140" align="center" sortable='custom' >
					<template slot="header">
						<span >案件奖励(元)</span>
					</template>
					<template slot-scope="scope">
						<span :class=" Number(scope.row.reward) != 0 ? 'rewardColor isValue' : 'rewardColor' ">{{ scope.row.reward }}</span>
					</template>
				</el-table-column>
				<el-table-column show-overflow-tooltip prop='deduction' label="扣款金额" min-width="140" align="center" sortable='custom'>
					<template slot="header">
						<span>扣款金额(元)</span>
					</template>
					<template slot-scope="scope">
						<span :class=" Number(scope.row.deduction) != 0 ? 'deductionsColor isValue' : 'deductionsColor' " @click.stop="deductionInfo(scope.row)">{{ scope.row.deduction }}</span>
					</template>
				</el-table-column>
				<el-table-column show-overflow-tooltip  prop='actual_amount' label="实际金额" sortable='custom' min-width="140" align="center">
					<template slot="header">
						<span>实际金额(元)</span>
					</template>
					<template slot-scope="scope">
						<span class="reallyColor">{{ scope.row.actual_amount }}</span>
					</template>
				</el-table-column>
				<el-table-column show-overflow-tooltip  prop='settlements_name' label="结算类型" min-width="120" align="center" sortable='custom' >
					<template slot-scope="scope">
						<template v-if="scope.row.settlements_name == '导入结算'"> {{ scope.row.settlements_name}}</template>
						<template v-else>
							{{ scope.row.settlements_name | getNullVal }}
						</template>
					</template>
				</el-table-column>
				<el-table-column show-overflow-tooltip  prop="created_at" label="定稿时间" min-width="180" align="center" sortable='custom'>
					<template slot-scope="scope">
						{{scope.row.created_at | getNullVal}}
					</template>
				</el-table-column>
      </el-table>
    </div>
    <div class="earnings-bottom">
      <pagination @paginationChange="paginateChange" :total="total"></pagination>
    </div>

    <!-- 查看评分页面 -->
    <earningsInfo ref="earningsInfo"/>
    <!-- 扣款信息查看界面 -->
    <earningsDeduction ref="earningsDeduction"/>
    <!-- 上月结算明细 -->
    <lastMonthSettlement ref='lastMonthSettlement'></lastMonthSettlement>
  </div>
</template>

<script>
import Pagination from '~/components/pagination'
import tableSearch from '~/components/tableSearch'
import orderStatistics from "~/components/orderStatistics"
import earningsInfo from './components/earnings-info'
import earningsDeduction from './components/earnings-deduction'
import lastMonthSettlement from "./components/lastMonthSettlement"
import { getMyInfo } from "~/api/user"
export default {
  components: {
    Pagination,
    tableSearch,
    earningsInfo,
    orderStatistics,
    earningsDeduction,
    lastMonthSettlement
  },
  data () {
    return {
      tableData:[],
      loading: false,
      pageSize: 25, //一页可以几条
      // currentPage: 1, //目前在第几页
      // tableSize: 25, //一页几条
      total: 0,
      selectHead: [
        {
          label: '订单编号',
          props: 'order_number'
        },
        {
          label: '专利类型',
          props: 'type'
        },
        {
          label: '案件名称',
          props: 'name'
        },
        {
          label: '联络人',
          props: 'liaisons'
        },
        {
          label: '扣款情况',
          props: 'deduction'
        },
        {
          label: '案件奖励',
          props: 'reward'
        },
        {
          label: '结算金额',
          props: 'settlements_price'
        },
        {
          label: '结算状态',
          props: 'settlement_status'
        },
        {
          label: '结算类型',
          props: 'settlements_name'
        },
    
        {
          label: '定稿时间',
          props: 'createdTime'
        }
      ],
      paramsByOrder: {},
      myInfo: {
        last_mon_total: 0,
        mon_total:0
      },
      roleID: 2,
    }
  },
  created () {
    this.getTableData()
  },
  methods: {
    async getMyinfo (params) {
      let myInfo = await getMyInfo(this.$axios, params);
      if (myInfo.data.status == 'success') {
        this.$store.commit("setRoleInfo",myInfo.data.data)
        this.$store.commit("setUser",myInfo.data.data)
        this.myInfo = myInfo.data.data
      }
    },
    getTableData (args) {
      let params = {
        perPage: this.pageSize,
        page: this.currentPage,
      }
      params = {...params, ...this.paramsByOrder, ...this.search_params}
      if (args) {
        params = {...params, ...args}
      }
      this.loading = true
      this.$axios.get('api/settlement', {
        params: params
      }).then(res => {
        if (res.data.code == 200) {
          this.loading = false
          this.tableData = res.data.data
          this.pageSize = res.data.page.per_page
          this.total = res.data.page.total
          this.getMyinfo()
        } else {
          this.loading = false
          this.$message.error('服务器繁忙')
        }
      })
    },
    deductionInfo (row) {
      if (row.deduction != 0) {
        this.$refs['earningsDeduction'].show(row)
      }
    },
    searchMethods(params, no_search) {
      this.sort_params = {}
      this.currentPage = 1
      this.pageSize = 25
      this.search_params = params
      if (params.createdTime) {
        params.created_start_time = params.createdTime[0]
        params.created_end_time = params.createdTime[1]
        delete params.createdTime
      }
      if (!no_search) {
          this.getTableData()
      }
    },
    paginateChange(params) {
      this.pageSize = params.perPage
      this.currentPage = params.page
      this.getTableData()
    },
    tableSortChange (column) {
      if (column.order === 'descending') {
        this.paramsByOrder.sort_str = column.prop
        this.paramsByOrder.sort_order = 'desc'
      } else if (column.order === 'ascending'){
        this.paramsByOrder.sort_str = column.prop
        this.paramsByOrder.sort_order = 'asc'
      } else {
        delete this.paramsByOrder.sort_str
        delete this.paramsByOrder.sort_order
      }
      this.loading = true
      this.currentPage = 1
      this.getTableData()
    },
    selectRow (row) {
      if(window.getSelection().toString() === ''){
        this.$refs.earningsInfo.show(row)
      }
    },
    lastMonthSettlement () {
      this.$refs['lastMonthSettlement'].show()
    },
  }
}
</script>

<style lang='less' scoped>
  .earnings {
    width: 90%;
    height: 100%;
    margin: 0 auto;
    padding:  25px 30px 0 30px;
    background: #fff;
    display: flex;
    flex-direction: column;

    &-header {
      // height: 45px;
      flex: 0 0 45px;
      .el-breadcrumb {
        .el-breadcrumb__item {
          .el-breadcrumb__inner,.el-breadcrumb__separator {
            font-size: 25px;
            color:rgba(0,35,151,1);
            font-weight: 400;
          }
        }
        .el-breadcrumb__item:first-child {
          .el-breadcrumb__inner{
            padding-left: 10px;
            border-left: 5px solid #002397;
          }
        }
      }
      box-sizing: border-box;

      /deep/.el-button {
        border:1px solid rgba(36,157,255,1);
        border-radius:12px;
        padding: 5px 16px;
        color: #31A3FF;
        font-size: 15px;
        margin: 0 40px 10px 0;

      }
      .el-button:hover {
        background:rgba(36,157,255,1);
        color: #fff;
      }
      .el-button:focus {
        background:rgba(36,157,255,1);
        color: #fff;
      }
    }
    &-main {
      flex: 1;
      max-height:calc(100% - 115px) ;

      .tableText {
        color: #353535;
      }
      .settlementColor {
        color: #E4C100;
      }
      .rewardColor {
        color: #1AB700;
      }
      .deductionsColor {
        color: #CB0000;
      }
      .reallyColor {
        color: #0084E9;
      }

      .isValue{
        text-decoration:underline ;
        cursor: pointer;
      }
    }
    &-bottom {
      flex: 0 0 70px;
      padding-top: 19px;
    }
  }
</style>
